<template>
  <div class="auto-hi">
    <div class="auto-hi-tip">自动打招呼</div>
    <!-- 文本域 -->
    <div class="auto-hi-content">
      <el-input
        v-model.trim="searchInput"
        type="textarea"
        placeholder="请输入内容"
        :autosize="{ minRows: 8, maxRows: 8 }"
        maxlength="500"
        show-word-limit
      ></el-input>
      <div class="tips">
        <img src="../../../assets/images/tools/bgHi.png" alt="" />
        <p style="color: #333333; font-size: 14px; margin-top:25px;">
          <span style="color: #999999">功能说明：</span>
          接受或申请新增好友后，自动给对方发送该话术。
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'ToolsAutoHi',
  data() {
    return {
      searchInput: ''
    }
  },
  computed: {
    ...mapGetters({
      config: 'nedb/autoHiConfig'
    })
  },
  watch: {
    searchInput(val) {
      if (val !== this.config.Content) {
        this.debounceInput()
      }
    }
    // 解决第一次加载页面 config读取延迟导致searchInput无法读取到信息的问题
    // config(val) {
    //   this.searchInput = val.Content
    // }
  },
  created() {
    // 读取配置
    this.$store.dispatch('nedb/SetAutoHiConfig')
    // 节流防抖
    this.debounceInput = this._.debounce(this.debounceInput, 300)
    // 加载已保存的配置
    this.searchInput = this.config.Content
  },
  methods: {
    debounceInput() {
      const autoHi = {
        ContentType: 'Text', // 发送消息类型 Text Picture Voice Video Link File NameCard
        Content: this.searchInput // 发送消息内容 文本，文件url，链接json，名片wxid
      }
      this.$store.dispatch('nedb/UpdateOrAddAutoHiConfig', autoHi)
    }
  }
}
</script>

<style lang="scss" scoped>
.auto-hi {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px 20px;
  overflow: hidden;
  .auto-hi-tip {
    font-size: 14px;
    color: #999999;
    margin-bottom: 14px;
  }

  .auto-hi-content {
    flex: 1 1 auto;
    display: flex;
    ::v-deep .el-textarea {
      width: 524px;
      height: 305px;
      .el-textarea__inner {
        height: 100% !important;
      }
    }

    .tips {
      flex: 1 1 auto;
      height: 305px;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
    }
  }
}
</style>
